iVan
iVan, the only van conversion app you’ll ever need.
The Project
iVan is a Web Responsive App designed to guide users throughout their van conversion journey, allowing them to instantly chat with an expert for one-on-one video consultations, and with access to curated content and tutorials.
Problem Statement
A user who is converting a van needs a way to obtain professional guidance during their build because they need support and help from professionals in order to build a van designed for their needs.
We will know this to be true when we see that our users use our app to build/convert their van.
Design Thinking Process
Research
Competitor Analysis
To better understand if and where the product would fit within the market I conducted a competitor analysis. I focused on apps and companies with a similar target: guiding users through a van conversion, and features: one-on-one consultations and tutorials.
I found out that there wasn’t a lot of apps with a similar product, most of the competition is in the form of blogs with video and article tutorials but one-on-one consultations are not an option.
This analysis also helped me with design inspiration.
Two competitors I analysed.
User Research
I then started gathering decisive information from the users to find out what were the main features and happy paths to reach their needs, and how the app could truly fulfil their wishes.
At this stage, conversation with users is key to start designing an app that will genuinely meet their expectations.
My primary user groups were:
PEOPLE who have already built a van,
PEOPLE planning on converting one, and
PEOPLE dreaming about a converted van.
User Interviews
I interviewed 3 people who had the project of converting a van with no definite time line. My script comprised 13 questions and the interviews were done remotely via Zoom, and they lasted about 25 minutes.
My research goals were:
UNDERSTAND the users’ behaviour when converting a van.
IDENTIFY the type of resources van builders are looking for.
IDENTIFY pain points encountered by users with the existing web apps and tools on the market.
DISCOVER which features would be interesting for users.
Once the interviews were completed, I analysed the date using an affinity map. This helped gathered insightful information about user’s goals, behaviours and needs, and it raised pain points and frustrations. It also provided interesting and enlightening points of views and ideas I needed to address when designing the app.
Affinity map based on the user interviews.
Key takeaways & insights:
FUN
Most users think of this project as a fun project and a hobby that would allow them to do something with their hands.
Most users think of this project as a fun project and a hobby that would allow them to do something with their hands.
EXPERIENCE
The participants lack of experience in construction and DIY show that clear explanations would be essential.
The participants lack of experience in construction and DIY show that clear explanations would be essential.
CONFIDENCE
Users should receive regular notifications, encouragements and congratulations throughout their conversion journey to significantly help them to stay motivated and be confident.
Users should receive regular notifications, encouragements and congratulations throughout their conversion journey to significantly help them to stay motivated and be confident.
HELP VS MONEY
Getting help from an expert is considered as a definite improvement for the conversion, but it will depend on the price.
Getting help from an expert is considered as a definite improvement for the conversion, but it will depend on the price.
The user interviews and the user research analysis helped redefine the objectives of the app, raised new challenges and provided answers regarding some of features that should be implemented in the app, but it also paved the way to creating the personas.
Analysis
Personas
At this stage, it is important to determine who are the potential users of the app so I created personas based on the interview findings and the previous research. I imagined who could the ideal user be: their demographics (age, social background, education…), their goals, needs, behaviours and fears. The idea was to learn about who I should be building the app for and what I should include to make it a success.
Personas for the app based on the user research.
Since, each persona represent an entire audience of users, with different goals and needs, motivations and frustrations towards converting a van, they helped me focus on certain information, make decisions based on their personality and empathize with the potential users of the iVan app.
Journey Maps
The next phase was to start thinking of the user’s journey in order to better understand and visualise the processes the user would go through when using the app in order to accomplish their goals. So I sketched user journey maps based on the personas' user stories and the problem statement.
Journey maps for each of the personas.
Task Flows
Finally, I created user flows to visualise how each persona could complete their objective within the app and to make sure each path was obstacle-free.
Task flows based on the main feature of the app.
Creating user journey maps and task flows enhanced the design and the usability of the app as it brought to light unexpected pathways and blockages in the user path.
They clearly showed the detailed step-by-step process I needed to envision and build to create the best user experience.
Design
Site Map & Card Sorting
Then, I created a site map based on my analysis and I conducted a card sorting exercise to validate my decision. This was done to understand how people would expect the content of the app to be organised.
Initial site map of the app before the card sorting exercise.
Participants were asked to sort tasks into categories according to what made the most sense to them. Then, they needed to name those categories.
The results were then analysed using a similarity metric and a dendrogram, in which we can see the percentage of participants who sorted the tasks in a similar way, and a new site map was created to overcome any issues.
Card sorting results into a similarity metric and a dendogram.
Prototype
Low-fidelity Wireframes
I started to sketch low-fidelity wireframes with pen and paper to map out the app’s structure and screens layouts. It helped figuring out the design vision and to visualise the user flows, as well as getting early feedback.
Low-fidelity wireframes for Mobile.
Low-fidelity wireframes for Desktop.
Mid-fidelity Wireframes
Once the low-fidelity wireframes were validated, I moved on to start designing the mid-fidelity wireframes in order to prepare for the usability tests.
After various rounds of iteration, where I had to adjust texts, size, buttons and layouts, I was able to bring the user flows, navigation, and interactions to life.
Mid-fidelity wireframes.
Usability Test
I conducted moderated remote usability tests of the mid-fidelity wireframes with a few participants to evaluate the core features of the app and to determine whether the user paths made sense or not.
I interviewed 6 people from age range 23 to 36, with a wide variety of professional experiences, and asked them to complete 4 tasks: sign up, search for content, find an expert and book an appointment, and join the call with the expert.
Objectives:
DETERMINE whether the app is easy to access and navigate from a new user's perspective. Can they reach the home page and navigate from there without feeling lost or overwhelmed?
OBSERVE what does and doesn't work in terms of features and design inconsistencies. Is there anything the users don't understand or don't find intuitive?
FIND OUT if a new user can complete all the most important tasks available on the app. How easy is it to search for an expert, book and call them?
I organised the data collected into an affinity map in which I could clearly see the recurring topics discussed during the tests. Once I sorted all the data into groups, I found out 8 main topics that I organised by observations, quotes and errors.
Affinity map by task.
I gained invaluable knowledge from these tests as I received feedback on the app and its current design and navigation. It exposed pain points and frictions depending on each user's personality and background, and helped improve the app and its usability.
Once I analysed the results using a rainbow spreadsheet, I was able to highlight the five most recurring issues that needed to be amended.
Rainbow spreadsheet.
High-fidelity Wireframes
To obtained the high-fidelity wireframes I focused on the UI of the app: applying Gestalt principles and brand guidelines, grids and space fundamentals and designing for accessibility. After another round of feedback, the high-fidelity prototype for the iVan app was born.
Evolution of the high-fidelity prototype.
I also designed responsive frameworks for medium and expanded screens to make sure the design made sense and was coherent.
Responsive frameworks for medium and expanded screens.
Then I moved on to applying all those changes into the entire frames of the mobile prototype.
Hight-fidelity prototype and latest version to date.
Video Demo of the iVan app
To watch a video demo of the iVan app, you can click on the video.
Clickable Prototype
To test the mobile prototype, please click on start.
Further Steps
The app would definitely benefit from having a UI or graphic designer’s eye look at it. I still believe there’s a lot that can be improved aesthetically as it still looks quite basic now, from my point of view. For instance, the filter options could certainly get an improvement, it is functional for now but it does look plain and not very sophisticated. In a general way, I would like to enhance the look of the app and get an even stronger van-lifer/adventurous look.
Suggested improvements:
MESSAGING TOOL
Having the possibility to pay less money to be able to chat and send photos and videos to an expert might really enhance the usability of the app and simplify its use. Moreover, it might bit more fitted to a lot of users who aren’t very comfortable with video/phone calls.
Having the possibility to pay less money to be able to chat and send photos and videos to an expert might really enhance the usability of the app and simplify its use. Moreover, it might bit more fitted to a lot of users who aren’t very comfortable with video/phone calls.
ONLINE SHOP
If iVan wants to become “the only van conversion app you’ll need”, it should definitely offer an online shop where users can buy, depending on their country, the tools and materials necessary - and recommended by the experts - to complete a task. Having an online shop would definitely improve and simplify the users’ experience as it will avoid the struggle looking for the materials they need elsewhere.
If iVan wants to become “the only van conversion app you’ll need”, it should definitely offer an online shop where users can buy, depending on their country, the tools and materials necessary - and recommended by the experts - to complete a task. Having an online shop would definitely improve and simplify the users’ experience as it will avoid the struggle looking for the materials they need elsewhere.
Conclusion
My design has definitely improved over time thanks to the constant feedback I received. The app has switched from a pen and paper sketch made out of squares and scribbles to a high-fidelity prototype with pictures, text, colours and a complete interface. I learned how to listen to my potential users, receive feedback for my design and trust myself as a designer to create an app that would not only be efficient, practical and intuitive, but also nice-looking and accessible to everyone.
The process of prototyping has made me realise that designing on a mobile frame can be tricky and demanding, especially after sketching with a pen and paper, and that as a designer I often would have to make design decisions that could impact the entire look of the product. But nothing is permanent and iterations should be valued as a way to explore and let creativity run wild.
Overall, the app has built its identity over the past five months and will certainly continue to do so in the future.
